<template>
  <div id="app1">
      <header class="header">发现</header>
      <!--  -->
      <div class="liu_list">
          <figure v-for="(v,i) in liu_list" :key="i">
            <div class="left_cont">
              <h3>{{v.title}}</h3>
              <p>{{v.p}}</p>
            </div>
            <img :src="v.img">
          </figure>
      </div>
      <!--  -->
      <div class="title_img">
        <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/">
      </div>
      <!--  -->
      <div class="scetion">
        <div class="list_box" v-for="(v,i) in lists" :key="i">
        <div class="section_content">
            <h3><img :src="v.img">{{v.h3}}</h3>
            <p>{{v.p}}</p>
        </div>
        <!--  -->
        <div class="chi_list">
          <figure v-for="(v,i) in v.list_box2" :key="i">
            <img :src="v.img">
            <p>{{v.p1}}</p>
            <p>{{v.p2}}</p>
          </figure>
        </div>
        <p class="p" v-for="(v,i) in v.list_box3" :key="i">{{v.p4}}</p>
        </div>

         <!-- <div class="list_box">
        <div class="section_content">
            <h3><img src="src/assets/img/zan.png">美食热推</h3>
            <p>你的口味，我都懂得</p>
        </div>
        
        <div class="chi_list"> b 
          <figure>
            <img src="https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/">
            <p>蛋炒饭</p>
            <p>￥12</p>
          </figure>

          <figure>
            <img src="https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/">
            <p>蛋炒饭</p>
            <p>￥12</p>
          </figure>

          <figure>
            <img src="https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/">
            <p>蛋炒饭</p>
            <p>￥12</p>
          </figure>
        </div>
        <p>查看更多></p>
        </div> -->

         <!-- <div class="list_box">
        <div class="section_content">
            <h3><img src="src/assets/img/zan.png">美食热推</h3>
            <p>你的口味，我都懂得</p>
        </div>
        <div class="chi_list">
          <figure>
            <img src="https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/">
            <p>蛋炒饭</p>
            <p>￥12</p>
          </figure>

          <figure>
            <img src="https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/">
            <p>蛋炒饭</p>
            <p>￥12</p>
          </figure>

          <figure>
            <img src="https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/">
            <p>蛋炒饭</p>
            <p>￥12</p>
          </figure>
        </div>
        <p>查看更多></p>
        </div> -->

         <!-- <div class="list_box">
        <div class="section_content">
            <h3><img src="src/assets/img/zan.png">美食热推</h3>
            <p>你的口味，我都懂得</p>
        </div>
        <div class="chi_list">
          <figure>
            <img src="https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/">
            <p>蛋炒饭</p>
            <p>￥12</p>
          </figure>

          <figure>
            <img src="https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/">
            <p>蛋炒饭</p>
            <p>￥12</p>
          </figure>

          <figure>
            <img src="https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/">
            <p>蛋炒饭</p>
            <p>￥12</p>
          </figure>
        </div>
        <p>查看更多></p>
        </div> -->
      </div>
      <!--  -->
      <div class="kon"></div>
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name:'app1',
  data () {
      return {
        liu_list:[
          {
            "title":"金币商城",
            "p":"0元元好购物在这里",
            "img":"https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/"
          },
          {
            "title":"必吃爆料",
            "p":"最老外卖指南",
            "img":"https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/"
          },
          {
            "title":"推荐有将",
            "p":"5元现金拿不停",
            "img":"https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/"
          },
          {
            "title":"周边优惠",
            "p":"领取口碑好卷",
            "img":"https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg?imageMogr/format/webp/"
          },
          {
            "title":"免费流量",
            "p":"没月最高500M",
            "img":"https://fuss10.elemecdn.com/5/10/2351e989d4171479ba0d7b5c06053jpeg.jpeg?imageMogr/format/webp/"
          },
          {
            "title":"百元红包",
            "p":"兴业银行联名卡",
            "img":"https://fuss10.elemecdn.com/3/cc/a45d2b9d7d09bbc49b40d4e626093jpeg.jpeg?imageMogr/format/webp/"
          }
        ],
        lists:[
          {
              "img":"src/assets/img/zan.png",
              "h3":"美食热推",
              "p":"你的口味，我都懂得",
          list_box2:[
              {
              "img":"https://fuss10.elemecdn.com/4/98/ff1208a7f70848098f2a6b9b97fedjpeg.jpeg?imageMogr/format/webp/",
              "p1":"驴肉火烧",
              "p2":"￥8"
            },
            {
              "img":"https://fuss10.elemecdn.com/b/92/734cd41dca0e8f659ed2809983da5jpeg.jpeg?imageMogr/format/webp/",
              "p1":"美味干锅包菜",
              "p2":"￥20"
            },
            {
              "img":"https://fuss10.elemecdn.com/9/8e/746dff1bcbb89db79cd3adcb3fdc8jpeg.jpeg?imageMogr/format/webp/",
              "p1":"东北烤冷面",
              "p2":"￥20"
            }
          ],
          list_box3:[
              {
              "p4":"查看更多 >"
            }
          ]
        },
        {
              "img":"src/assets/img/zan.png",
              "h3":"天天特价",
              "p":"特价商品，一网打尽",
          list_box2:[
              {
              "img":"https://fuss10.elemecdn.com/5/63/67e4b74180f11d35d14641fba274ajpeg.jpeg?imageMogr/format/webp/",
              "p1":"麻辣",
              "p2":"￥8"
            },
            {
              "img":"https://fuss10.elemecdn.com/1/4f/4fb01cc6fd1e2cdf8792ce05847fdjpeg.jpeg?imageMogr/format/webp/",
              "p1":"烤鳕鱼",
              "p2":"￥20"
            },
            {
              "img":"https://fuss10.elemecdn.com/f/11/80276422c74f5c4897ff99516e86fjpeg.jpeg?imageMogr/format/webp/",
              "p1":"麻辣大闸蟹",
              "p2":"￥20"
            }
          ],
          list_box3:[
              {
              "p4":"查看更多 >"
            }
          ]
        },
        {
              "img":"src/assets/img/zan.png",
              "h3":"限时好礼",
              "p":"你的口味，我都懂得",
          list_box2:[
              {
              "img":"https://fuss10.elemecdn.com/7/c5/f595b52bc6b50c9899398dccffd42jpeg.jpeg?imageMogr/format/webp/",
              "p1":"7元饿了么",
              "p2":"210金币"
            },
            {
              "img":"https://fuss10.elemecdn.com/8/0b/3a95765ac36e447d55409ae067b53jpeg.jpeg?imageMogr/format/webp/",
              "p1":"暖冬福利",
              "p2":"20金币"
            },
            {
              "img":"https://fuss10.elemecdn.com/d/56/8b479231309654bfa07f28999768bjpeg.jpeg?imageMogr/format/webp/",
              "p1":"大闸蟹",
              "p2":"9金币"
            }
          ],
          list_box3:[
              {
              "p4":"查看更多 >"
            }
          ]
        },
      ]
    }
  }
}
</script>

<style scoped lang="less">
.px2rem(@name, @px) {@{name}: @px / 75 * 1rem;}
.header{
  width: 100%;
  .px2rem(height, 100);
  position: fixed;
  left: 0;
  top: 0;
  background:#00a4ff;
  text-align: center;
  .px2rem(line-height,100);
  .px2rem(font-size, 32);
  color: white;
  font-weight: 400; 
}
.liu_list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .px2rem(margin-top,100);
  figure{
    display: flex;
    align-items:center;
    border-bottom: 1px solid   #f2f2f2;
    box-sizing: border-box;
    .px2rem(height, 172);
    width: 50%;
    .left_cont{
      flex: 1;
      h3{
        .px2rem(font-size, 34);
        color: #ff9e0e;
        font-weight: bolder;
        .px2rem(text-indent, 32);
        .px2rem(height, 50);
      }
      p{
        .px2rem(font-size, 22);
         color: #999999;
         .px2rem(text-indent, 32);
      }
    }
    img{
      .px2rem(width, 100);
      .px2rem(height,90);
      margin: 0 5%;
    }
  }
  figure:nth-child(1){
    border-right: 1px solid #f2f2f2;
  }
  figure:nth-child(2){
    h3{
      color: #f5785d;
    }
  }
  figure:nth-child(3){
     border-right: 1px solid #f2f2f2;
    h3{
      color: #1ba9e1;
    }
  }
  figure:nth-child(4){
    h3{
      color: #ed6a64;
    }
  }
  figure:nth-child(5){
     border-right: 1px solid #f2f2f2;
    h3{
      color: #ff8585;
    }
  }
  figure:nth-child(6){
    h3{
      color: #e88f28;
    }
  }
}  
.list_box{
    background: white;
    margin-top: 2%; 
}
.title_img{
  width: 100%;
  .px2rem(height, 212);
  background: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center; 
  img{
    width: 96%;
    height: 98;
  }
}
.scetion{
  width: 100%;
  background: #eeeeee;
  .section_content{
    width: 100%;
      .px2rem(height, 120);
      h3{
        .px2rem(height, 80);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(../assets/img/zan_bg.png);
        background-size: 100% 100%; 
        text-align: center;
        .px2rem(font-size, 32);
        font-weight: bolder;
        img{
          .px2rem(width, 30);
          .px2rem(height, 30);
          margin: 0 2%;
        }
      }
    p{
      .px2rem(height, 40);
      text-align: center;
      .px2rem(line-height, 30);
      .px2rem(font-size, 22);
      color: #a0a0a0;
    }
  }
  .chi_list{
    width: 100%;
    display: flex;

    figure{
      width: 33%;
      .px2rem(height, 320);
      margin: 0 1%;
      img{
        display: block;
        margin: 0 auto;
        .px2rem(height, 220);
        .px2rem(width, 220);
      }
      p:nth-child(2){
        .px2rem(font-size, 22);
        .px2rem(height, 50);
        .px2rem(line-height, 50);
        .px2rem(text-indent, 10);
      }
       p:nth-child(3){
        .px2rem(font-size, 22);
        .px2rem(height, 30);
        .px2rem(line-height, 30);
        color: #f94843;
         .px2rem(text-indent, 10);
      }
    }
  }
  .p{
    .px2rem(height, 60);
    .px2rem(line-height, 40);
    text-align: center;
    .px2rem(font-size, 24);
    color: #a8a8a8;
  }
}

.kon{
  .px2rem(height, 100);
}
</style>
